<template>
	<view class="min100">
		<view class="flex radius-45 ptb-12 plr-10" style="">
			<view class=" flex toptitbox flex-between">
				<view class="flex radius-45 plr-10 tabbox">
					<view :class="['ptb-20','mlr-10','midItem',midIndex==0?'midActive':'']" @click="changeMid(0)">
						未发货
						<view class="line" v-if="midIndex==0"></view>
					</view>
					<view :class="['ptb-20','mlr-10','midItem',midIndex==1?'midActive':'']" @click="changeMid(1)">
						已发货
						<view class="line" v-if="midIndex==1"></view>
					</view>
				</view>
			</view>
		</view>
		
		<view class=" ptb-20">
			<view class="min100 plr-30  ptb-40 bg">
				<view class="flex flex-start mb-30 radius-20 plr-30 ptb-30 "
					v-for="(item,index) in exchange_list" style="background-color: #f5f5f5;" :key="index">
					<image :src="item.image" class="itemImg mr-20 radius-20" mode="widthFix"></image>
					<view style="width: 65%;" class="">
						<view class="flex1 flex-between" style="align-items: center;">
							<view class="fw size-28">
								{{item.name}}
							</view>
							<view class="size-44">
								￥{{item.price}}
							</view>
						</view>
						<view class="size-24 mt-20 flex " style="text-align: right;">
							<text v-if="item.status==0">未发货</text>
							<text v-if="item.status==1">已发货</text>
							<view class=" size-20" style="text-align: right;">
								{{item.create_time}}
							</view>
							
						</view>
		
						
						<view class="flex mt-20 logistics" style="">
							<view class="flex size-20">订单号：{{item.order_num}}</view>
							<view class="" style="width: 25rpx;height: 25rpx;">
								<image @click=copy(item.order_num) src="../../static/my/fuzhi.png" mode=""
									style="width: 100%;height: 100%;"></image>
							</view>
						</view>
						<view class="flex mt-20 logistics" style="" v-if="midIndex==1">
							<view class="flex size-20">物流单号：{{item.logistics_num}}</view>
							<view class="" style="width: 25rpx;height: 25rpx;">
								<image @click=copy(item.logistics_num) src="../../static/my/fuzhi.png" mode=""
									style="width: 100%;height: 100%;"></image>
							</view>
						</view>
						
		
					</view>
		
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				midIndex: 0,
				page: 1,
				exchange_list:[],
				listLength:0
			}
		},
		onLoad() {
			this.init()
		},
		onReachBottom() {
			this.page++
			if(this.listLength!==0){
				this.init()
			}
			
			
		},
		methods: {
			init(){
				this.$http('api/orders/goodsIntegralOrderList',{
					status: this.midIndex,
					page:this.page
				},"POST").then(res => {
					this.listLength=res.data.length
					console.log(res.data.length)
					this.exchange_list = this.exchange_list.concat(res.data);
				})
			},
			changeMid(index) {
				this.page = 1
				this.midIndex = index;
				this.exchange_list=[]
				this.init()
			
			},
			copy(val) {
				
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast();
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功',
									icon: 'none'
								});
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				this.$copyText(val).then(
					function(e) {
						console.log(val, e);
						uni.showToast({
							title: '复制成功!',
							icon: 'none'
						});
					},
			
				);
				// #endif
			},
		}
	}
</script>

<style scoped lang="less">
.logistics{
	justify-content: space-between;
	flex-wrap: nowrap;
	align-items: baseline;
}
.toptitbox {
		width: 100%;
		border-bottom: 1rpx solid #f6f6f6;
	}
.midItem {
		width: 100rpx;
		height: 70rpx;
		color: #999;
		font-size: 28rpx;
		text-align: center;
	}
.midActive {
		// border-bottom: 10rpx solid #44ACFF;
		color: #000;
		font-weight: 600;

		.line {
			width: 40%;
			height: 10rpx;
			position: relative;
			top: 9rpx;
			left: 30%;
			background-color: rgb(0, 203, 211);
		}
	}
.itemImg {
		width: 35%;
		// height: 220rpx;
	}
</style>
